<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>放学管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="/css/layui.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		.other {
			max-width: 120px;
			width: 15vw;
			height: 35px;
			padding-left: 20px;
			font-size: 14px;
			color: #686868;
			position: absolute;
			border: 1px solid;
		}

		.aa {
			float: left;
			display: block;
			padding: 9px 15px;
			margin-right: 25px;
			font-size: 16px;
			font-weight: 400;
			line-height: 20px;
			text-align-last: justify !important;
			text-align: justify !important;
		}
	</style>
</head>

<body class="main-body">
	<div id="vue-root" style="margin-top:50px;">

		<div class="search_box">
			<div class="add">
				<a href="release_item.html" style="color: white">添加信息</a>
			</div>
			<div class="refresh" onclick="location.reload()" style="display: inline-block;">刷新</div>

			<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0"
				style="float: right;">


			<v-select style="float: right;width: 150px;background-color: white;margin-right: 10px;" placeholder="请选择班级"
				label="name" :options="classess" :reduce="item=>item.id" v-model="search.classesId"></v-select>

			<!-- <div class="agent">
				<select class="search" v-model="search.t2" style="margin-top: -35px;width: 130px;right: 90px;">
					<option value="null">请选择状态</option>
					<option value="1">已放学</option>
					<option value="2">未放学</option>
					<option value="3">放学延迟</option>
				</select>
			</div> -->


		</div>
		<div class="table ">
			<table class="table_top">
				<thead>
					<tr>
						<th class="two">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th>序号</th>
						<th class="two">班级</th>
						<th class="two">放学时间</th>
						<th class="two">今日放学时间</th>
						<th class="two">状态</th>
						<th style="width: 120px">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(item,index) in list" :key="item.id">
						<td>
							<input type="checkbox" class="check-box" v-model="item.checked">
						</td>
						<td><span v-text="index+1"></span></td>
						<td class="two" v-text="classesMap[item.classesId]"></td>
						<td class="two" v-text="item.startTime+' - '+item.endTime"></td>
						<td class="two" v-text="item.startTime1+' - '+item.endTime1"></td>
						<td class="two" v-text="status(item)"></td>
						<td style="width: 120px">
							<div class="option">
								<div class="edit-icon option-icon">
									<a :href="'release_item.html?id='+item.id"
										style="position: absolute; left: 20%; top: 30%;">
										<img class="img" src="../image/edit.png" height="20" width="20"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
								<div class="delete-icon option-icon" @click="del([item.id])"
									style="right: 20%; top:30%;position: absolute;">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>


		<div class="delete" @click="batchDelete">批量删除</div>
		<!-- <div class="delete long-background-img" style="margin-left: 10px">批量导入</div> -->

		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
				<!--页面总数-->
			</li>
		</ul>
		<div style="float: right;margin-bottom: 20px;" v-if="pages>1">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/vue-select.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>

	<script>
		Vue.component('v-select', VueSelect.VueSelect);
		var schoolId = top_params().id;

		var now = dayjs().format('HH:mm:ss');

		var app = new Vue(merge({
			data: {
				classess: [],
				classesMap: {},
				urls: {
					list: '/pc/leaveTime/list/' + schoolId,
					del: '/pc/leaveTime/del'
				},
			},
			created: function () {
				this.getData();
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
					this.classess.forEach(function (it) {
						Vue.set(this.classesMap, it.id, it.name);
					}.bind(this));
				}.bind(this));
			},
			methods: {
				status: function (it) {
					if (!it.today) {
						it.startTime1 = it.startTime;
						it.endTime1 = it.endTime;
					}
					if (now < it.startTime1) return '未放学';
					if (now > it.endTime1) return '已放学';
					return '放学中';
				}
			},
		}));

	</script>

</body>

</html>